<template>
    <view class="content">
        <pure-elevator :list="subList" :value="subListFirstTabValue" :subValue="subListSecondTabValue"
            subListKey="products" :subScrollTop="50" :subOffsetTop="60" @tabClick="handleSubListTabClick"
            @tabChange="handleSubListTabChange" @subTabChange="handleSubListSubTabChange">
            <template #tabs>
                <!-- 这里建议用一个 view 组件进行包裹，因为在实际测试中，快手小程序如果不再包裹一层，会导致 provide/inject 的数据丢失 -->
                <view>
                    <pure-tabs :value="subListFirstTabValue" @tabClick="handleSubListTabClick" vertical>
                        <pure-tabs-item v-for="(item, index) in subList" :key="index" :value="item.id" :item="item"
                            :disabled="item.disabled">
                            <text class="tab">{{ item.name }}</text>
                        </pure-tabs-item>
                    </pure-tabs>
                </view>
            </template>
            <pure-elevator-floor v-for="floor in subList" :key="floor.id" :value="floor.id" :floor="floor">
                <pure-elevator-header :floorValue="floor.id">
                    <view class="floor-tabs">
                        <pure-tabs :value="subListSecondTabValue" @tabClick="handleSubListSubTabClick">
                            <pure-tabs-item v-for="subTab in floor.products" :key="subTab.id" :value="subTab.id"
                                :item="subTab" :disabled="subTab.disabled">
                                <text class="floor-tab">{{ subTab.name }}</text>
                            </pure-tabs-item>
                        </pure-tabs>
                    </view>
                </pure-elevator-header>
                <pure-elevator-group v-for="group in floor.products" :key="group.id" :value="group.id" :group="group"
                    :floorValue="floor.id">
                    <view class="group">
                        <!-- 装修分组标题 -->
                        <view class="group-title">{{ group.name }}</view>

                        <!-- 装修房间 -->
                        <view class="group-rooms">
                            <view class="group-room" v-for="room in group.goods" :key="room.id">{{ room.name }} </view>
                        </view>
                    </view>
                </pure-elevator-group>
            </pure-elevator-floor>
        </pure-elevator>
    </view>
</template>

<script setup>
import { ref } from "vue";
import { onReady } from "@dcloudio/uni-app";

// ####################################################################################################
// 二级分类使用
const subList = ref([]);
const subListFirstTabValue = ref(1);
const subListSecondTabValue = ref("1_1"); // 初始化所有子选项卡的下标

// 初始化数据
onReady(() => {
    initSubList();
});

// 初始化数据
function initSubList() {
    const _list = [];
    for (let i = 0; i < 18; i++) {
        const item = {
            id: i + 1,
            name: `分类${i + 1}`,
            products: [],
        };
        const jLength = 6;
        for (let j = 0; j < jLength; j++) {
            const product = {
                id: `${i + 1}_${j + 1}`,
                name: `分类${i + 1} - 子类${j + 1}`,
                goods: [],
            };
            for (let k = 0; k < 5; k++) {
                const child = {
                    id: `${i + 1}_${j + 1}_${k + 1}`,
                    name: `分类${i + 1} - 子类${j + 1} - 商品${k + 1}`,
                };
                product.goods.push(child);
            }
            item.products.push(product);
        }
        _list.push(item);
    }
    subList.value = _list;
}

// 一级菜单点击事件
function handleSubListTabClick(item) {
    // 需要同步更新绑定的二级菜单值,否则不会切换右侧内容
    subListSecondTabValue.value = item.products[0].id;

    // 更新绑定的一级菜单值
    subListFirstTabValue.value = item.id;
}

// 二级菜单点击事件
function handleSubListSubTabClick(item) {
    subListSecondTabValue.value = item.id;
}

// 一级分类的值更新事件
function handleSubListTabChange(value) {
    subListFirstTabValue.value = value;
}

// 子分类的值更新事件
function handleSubListSubTabChange(value) {
    subListSecondTabValue.value = value;
}
</script>

<style scoped>
.content {
    height: calc(100vh - var(--window-top) - var(--window-bottom));
    padding: 20px 20px;
    box-sizing: border-box;
}

.container {
    height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tab {
    padding: 1em;
    box-sizing: border-box;
}

.floor-tabs {
    box-sizing: border-box;
    font-weight: 700;
    position: sticky;
    z-index: 10;
    top: 0;
}

.floor-tab {
    height: 50px;
    display: flex;
    align-items: center;
    flex-direction: row;
    align-items: center;
    padding: 0 1em;
    box-sizing: border-box;
}

.group {
    padding: 10px 0 10px 10px;
    box-sizing: border-box;
}

.group-title {
    font-weight: 700;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.group-rooms {
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}

.group-room {
    padding: 60px 10px;
    text-align: center;
    background: #ffffff;
    box-sizing: border-box;
}
</style>
